<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <title>Todo</title>

</head>

<body>
    <input type="text" id="input">
    <button id="add">Add</button>
    <br>
    <input type="text" id="search">
    <div id="list"></div>
</body>
<script>
    let counter = 0;
    let task_list = [];
    let search_text = '';
    document.getElementById('add').onclick = function () {
        const input = document.getElementById('input');
        const task = input.value;
        task_list.push({ text: task, id: counter++ ,is_done: false});
        input.value = '';
        refresh_list();
    }
    document.getElementById("search").onchange = function () {
        search_text = document.getElementById("search").value;
        refresh_list();
    }
    function delete_task(id) {
        let result = [];
        for (let i = 0; i < task_list.length; i++) {
            const task = task_list[i];
            if (task.id != id) {
                result.push(task);
            }
        }
        task_list = result;
        refresh_list();
    }
    function refresh_list() {
        const list = document.getElementById('list');
        list.innerHTML = '';
        for (let i = 0; i < task_list.length; i++) {
            const task = task_list[i];
            if (task.text.includes(search_text)) {
                const li = document.createElement('li');
                li.innerHTML += `<input type="checkbox" onclick="done_task(${task.id})">`;
                li.style.textDecoration = task.is_done ? 'line-through' : 'none';
                li.innerHTML += task.text;
                li.innerHTML += `<button onclick="delete_task(${task.id})">X</button>`;
                list.appendChild(li);
            }
        }
    }
    function done_task(id) {
        for (let i = 0; i < task_list.length; i++) {
            const task = task_list[i];
            if (task.id == id) {
                task.is_done = !task.is_done;
                break;
            }
        }
        refresh_list();
    }

</script>

</html>